<style lang="less">
    @import './editable-table.less';
</style>

<template>
    <div>
        <Table stripe border
               :loading="isLoading" :columns="columnsList" :data="thisTableData"
               ></Table>

        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="totalRecord" :current="currentPage" :page-size="20" @on-change="changePage" show-elevator></Page>
            </div>
        </div>
    </div>
</template>

<script>
const editButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'primary',
            icon: 'edit',
            size: 'small',
            shape: 'circle'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('editOne',currentRow);
            }
        }
    },'编辑');
};
const deleteButton = (vm, h, currentRow, index) => {
    return h('Poptip', {
        props: {
            confirm: true,
            title: '您确定要删除这条数据吗?',
            transfer: true
        },
        on: {
            'on-ok': () => {
                vm.$emit('deleteOne', currentRow, index);
            }
        }
    }, [
        h('Button', {
            style: {
                margin: '2px 5px'
            },
            props: {
                type: 'error',
                placement: 'top',
                icon: 'trash-a',
                size: 'small',
                shape: 'circle'
            }
        }, '删除')
    ]);
};
const enableSwitch = (vm, h, currentRow, index) => {
    return h('Switch', {
                style: {
                    margin: '0 5px'
                },
                props: {
                    value: currentRow.status,
                    size: 'large',
                    trueValue: 1,
                    falseValue: 2
                },
                on: {
                    'on-change': (status) => {
                        vm.$emit('enableOne', status, currentRow);
                    }
                }
            },
                [
                    h('span', {
                        slot: 'open'
                    }, '禁用'),
                    h('span', {
                        slot: 'close'
                    }, '启用')
                ]
            );
};
const addButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'info',
            size: 'small',
            icon: 'plus',
            shape: 'circle'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('addOne', currentRow);
            }
        }
    }, '添加子菜单');
};
const stopButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'warning',
            size: 'small',
            icon: 'stop',
            shape: 'circle'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('stopOne', currentRow);
            }
        }
    }, '暂停');
};
const resumeButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'warning',
            size: 'small',
            icon: 'play',
            shape: 'circle'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('resumeOne', currentRow);
            }
        }
    }, '恢复');
};
const runButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'info',
            size: 'small',
            icon: 'android-send',
            shape: 'circle'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('runOne', currentRow);
            }
        }
    }, '立即执行');
};
const auditButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'primary',
            size: 'small',
            icon: 'gear-b',
            shape: 'circle'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('auditOne', currentRow);
            }
        }
    }, '审核');
};
const normalButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'info',
            size: 'small',
            icon: 'android-more-horizontal'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('normalOne', currentRow);
            }
        }
    }, '详情');
};
export default {
    name: 'dataTable',
    props: {
        columnsList: Array,
        value: Array,
        isLoading: Boolean,
        totalRecord: Number,
        currentPage: Number,
        permissionsPrefix: String
    },
    data () {
        return {
            columns: [],
            thisTableData: [],
            loading: true
        };
    },
    created () {
        this.init();
    },
    methods: {
        init () {
            // 加载数据
            this.thisTableData = JSON.parse(JSON.stringify(this.value));
            // system:user:list,system:user:enable,system:user:save,system:user:update
            // 渲染按钮、组件
            let access = localStorage.getItem('access').split(',');
            this.columnsList.forEach(item => {
                if (item.handle) {
                    item.render = (h, param) => {
                        let currentRowData = this.thisTableData[param.index];
                        let children = [];
                        item.handle.forEach(item => {
                            if (item === 'edit' && access.indexOf(this.permissionsPrefix+':update') > -1) {
                                children.push(editButton(this, h, currentRowData, param.index));
                            } else if (item === 'enable' && access.indexOf(this.permissionsPrefix+':enable') > -1) {
                                children.push(enableSwitch(this, h, currentRowData, param.index));
                            } else if (item === 'add') {
                                if (currentRowData.pid === 0) {
                                    children.push(addButton(this, h, currentRowData, param.index));
                                }
                            } else if (item === 'delete' && access.indexOf(this.permissionsPrefix+':delete') > -1) {
                                children.push(deleteButton(this, h, currentRowData, param.index));
                            } else if (item === 'stop' && access.indexOf(this.permissionsPrefix+':pause') > -1) {
                                if (currentRowData.status === 0) {
                                    children.push(stopButton(this, h, currentRowData, param.index));
                                } 
                            } else if (item === 'resume' && access.indexOf(this.permissionsPrefix+':resume') > -1) {
                                if (currentRowData.status === 1) {
                                    children.push(resumeButton(this, h, currentRowData, param.index));
                                } 
                            } else if (item === 'run' && access.indexOf(this.permissionsPrefix+':run') > -1) {
                                children.push(runButton(this, h, currentRowData, param.index));
                            } else if (item === 'audit' && access.indexOf(this.permissionsPrefix+':audit') > -1) {
                                children.push(auditButton(this, h, currentRowData, param.index));
                            } else if (item === 'info') {
                                children.push(normalButton(this, h, currentRowData, param.index));
                            }
                        });
                        //if (item.btn)
                        return h('div', children);
                    };
                }
            });
        },
        changePage (page) {
            this.$emit('changePage', page);
        }
    },
    watch: {
        value (data) {
            this.init();
        }
    }
};
</script>
